<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<%@ include file="/WEB-INF/views/include/head.jsp"%>

<link rel="stylesheet" href="${ctxStatic}/css/DateTimePicker.css">
<link rel="stylesheet" href="${ctxStatic}/css/common.css">
<link rel="stylesheet" href="${ctxStatic}/css/layerSm.css">
<script src="${ctxStatic}/DateTimePicker/DateTimePicker.js"></script>
<style>
:root, body{
    min-width:auto;
}

.searchSm {
    margin-bottom:5px;
}

.searchLeft{
    width:680px;
}

.searchRight{
    width:210px;
}
</style>
<script>

        $(function(){
            $("#dtBox1").DateTimePicker({
                  dateFormat:"yyyy-MM-dd",
                  parentElement:".timeBox",
              });
            addTitleCss();
        });
        
        //重置
        function clean(){
            // input赋值空
            $("input").val("");
            //$('#orderStatusCD').val('');
            //$("#orderStatusCD").select2(); 
            // 添加表单
            $("#searchForm").submit();
        }
        
            /*加结果集式样*/
    function addTitleCss() {
        // 结果集个数
        var resultNumber = $(".lengthId").length;
        // 如果结果集个数大于零
        if (resultNumber > 0) {
            var theadW = $('.tabScroll thead').width();
            var theadTh = $('.tabScroll thead tr th').length;
            $('.tabScroll thead tr th').width(theadW / theadTh);
            $('.tabScroll tbody tr:first-child td')
                    .each(
                            function() {
                                var indexNum = $(this).index();
                                var theadW = $('.tabScroll thead').width();
                                var theadTh = $('.tabScroll thead tr th').length;
                                $('.tabScroll thead tr th').width(theadW/theadTh);
                                $('.tabScroll tbody tr:first-child td').each(function(){
                                    var indexNum = $(this).index();
                                    var tdWidth = $('.tabScroll tbody tr:first-child td').eq(indexNum).css('width');
                                    $('.tabScroll thead tr th').eq(indexNum).width(tdWidth);
                                });
                            });
            $(this).addClass('active');
            $(this).siblings().removeClass('active');
        }else if(resultNumber == 0 ){
            var theadW = $('.tabScroll thead').width();
            var theadTh = $('.tabScroll thead tr th').length;
            $('.tabScroll thead tr th').width(theadW/theadTh);
        }
    }
        
    // 保存方法
    var saveForm = {
            s:null,
            t:null,
            save:function(s,t){
                $(t).attr("disabled",true);
                this.s=s;
                this.t=t;
                 $("#inputForm").validate({
                    submitHandler : function() {
                        var params = $("#inputForm").serialize();
                        $.post("${ctx}/order/order/updateOrderStatus", params, function(result) {
                            if (result == "false") {
                                $("#inputForm")[0].reset();
                                $(saveForm.t).attr("disabled",false);
                            } else {
                                // 状态更改成功！
                                layer.msg('<spring:message code="order_state_save_success"/>', {time:1000}); 
                                window.parent.frames[0].location.href = "${ctx}/order/order/";
                                closeWin();
                                
                            }
                        }, 'json');
                    }
                }   );
                $("#inputForm").submit(); 
        }
    }   
</script>
</head>
<body>
    <!--头部-->
    <div class="myshop clearfix">
        <!-- 更新订单状态 -->
        <%-- <spring:message code="order_update_order_state"/> --%>
        <p class="myshoptop fl"><spring:message code="order_check_order_state"/></p>
        <div class="fr">
            <div class="topBtnClose" onclick="closeWin()">
                <img src="${ctxStatic}/images/btn-close.png">
            </div>
        </div>
    </div>
        <div class="middle myshop_middleSm">
            <form  id="searchForm" action='${ctx}/order/order/updateOrderStatusForm' method="post">
            <div class="clearfix">
                <div class="searchLeft clearfix" >
                    <div class="searchSm clearfix ">
                        <!-- 状态 -->
                        <p class="searchTxt" style="width:45px;"><spring:message code="order_state"/></p>
                        <div class="searchInp" style="width: 150px">
                            <select  class="form-control sex"  id="orderStatusCD" name="orderStatusCD" data-rule-required="true" data-msg-required="<spring:message code="order_please_choose_order_state"/>">
                                <option value=''><spring:message code="order_please_input_state"/></option>
                                <c:forEach items="${orderStatusList}" var="item">
                                    <option <c:if test="${fn:split(order.orderStatusCD,'-')[1] eq item.itemValue}">selected="selected"</c:if>value="${item.itemCode}-${item.itemValue}">${item.itemNameCN}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <div class="searchSm clearfix">
                        <!-- 更新人 -->
                        <%-- <p class="searchTxt"><spring:message code="order_update_user"/></p> --%>
                        <!-- 创建人 -->
                        <p class="searchTxt" style="width:50px;"><spring:message code="order_createUser"/></p>
                        <div class="searchInp" style="width:95px;">
                            <select  class="form-control sex" id="createBy.id" name="createBy.id">
                                <option value=''><spring:message code="order_createUser"/></option>
                                <c:forEach items="${shopUserList}" var="item">
                                    <option <c:if test="${order.createBy.id eq item.createBy.id}">selected="selected"</c:if> value="${item.createBy.id}">${item.createUserName}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <%-- <div class="searchSm clearfix" style="margin-right:40px">
                        <!-- 更新日期 -->
                        <p class="searchTxt"><spring:message code="order_update_date"/></p>
                        <div class="searchTxt" style="width:90px;">
                            ${fns:getDate('yyyy-MM-dd')}
                        </div>
                    </div> --%>
                    <div class="searchSm clearfix">
                        <!-- 日期 -->
                        <p class="searchTxt" style="width:40px;"><spring:message code="order_date"/></p>
                        <div class="searchInp timeBox timeBoxSm">
                            <input type="text"  id="beginDate"  name="beginDate" class="time startDate1"  data-startend="start" data-startendelem=".endDate1" style="background-position: 79px 5px;" readonly data-field="date" maxlength="50" value="<fmt:formatDate value="${order.beginDate}" pattern="yyyy-MM-dd"/>" >
                        </div>
                        <div class="fl" style="text-align:center;width:15px;line-height:30px;">~</div>
                        <div class="searchInp timeBox timeBoxSm" style="margin:0;">
                            <input type="text"  id="endDate"  name="endDate" class="time endDate1" data-startend="end" data-startendelem=".startDate1" style="background-position: 79px 5px;" readonly data-field="date" maxlength="50" value="<fmt:formatDate value="${order.endDate}" pattern="yyyy-MM-dd"/>">
                        </div>
                    </div>
                </div>
                <div class="searchRight">
                <!-- 状态更新 -->
                    <!-- 重置 -->
	                <button type="button" class="btn-js" onclick="clean()" ><spring:message code="common_reset"/></button>
	                <!-- 检索 -->
	                <button type="button" class="btn-js" onclick="return page();"><spring:message code="commom_check"/></button>
                    <!-- 状态更新 -->
                    <button type="button" onclick="saveForm.save(0)" class="btn-cj" style="width: 75px;"><spring:message code="order_update_state"/></button>
                </div>
            </div>
            <div class="clearfix">
                <!-- 项目列表 -->
                <p class="data_id"><spring:message code="order_item_list"/></p>
            </div>
            <div class="tableBox tableList">
                <div class="tableSm">
                    <div class="tabScroll" style="height:395px;">
                    <table >
                        <thead>
                            <tr>
                                <th><input type="checkbox" name="ids" style="height:auto;"></th>
                                <!-- No. -->
                                <th><spring:message code="order_No"/></th>
                                <!-- 标记 -->
                                <th><spring:message code="order_mark"/></th>
                                <!-- 订单号 -->
                                <th><spring:message code="order_orderNo"/></th>
                                <!-- 客户姓名 -->
                                <th><spring:message code="order_customer_name"/></th>
                                <!-- 状态 -->
                                <th><spring:message code="order_state"/></th>
                                <!-- 款式类别 -->
                                <th><spring:message code="order_style_category"/></th>
                                <!-- 试穿号码 -->
                                <th><spring:message code="order_size"/></th>
                                <!-- 面料 -->
                                <th><spring:message code="order_material"/></th>
                                <!-- 数量 -->
                                <th><spring:message code="order_number"/></th>
                                <!-- 售价 -->
                                <th><spring:message code="order_sales_price"/></th>
                                <%-- <!-- 天数 -->
                                <th><spring:message code="order_days"/></th> --%>
                                <!-- 预计交付日 -->
                                <th><spring:message code="order_estimated_delivery_date"/></th>
                                <%-- <!-- 最终交付日 -->
                                <th><spring:message code="order_final_delivery_date"/></th> --%>
                                <!-- 创建人 -->
                                <th><spring:message code="order_createUser"/></th>
                                <!-- 创建日期 -->
                                <th><spring:message code="order_createDate"/></th>
                            </tr>
                        </thead>
                        <tbody>
                            <c:forEach items="${orderList}" var="item" varStatus="status">
                                <tr>
                                    <td style="min-width:30px; max-width:30px"><input type="checkbox" name="ids" class="lengthId" value="${item.id}"></td>
                                    <!-- NO. -->
                                    <td style="min-width:30px; max-width:30px">
                                        <p>${status.index + 1}</p>
                                    </td>
                                    <!-- 标记 -->
                                    <td style="min-width:40px;max-width:40px">
                                        <c:if test="${fn:split(item.urgentCD,'-')[1] eq '10'}">
                                            <img src="${ctxStatic}/images/icon-01.png" class="orderListImg">
                                        </c:if>
                                        <c:if test="${fn:split(item.urgentCD,'-')[1] eq '20'}">
                                            <img src="${ctxStatic}/images/icon-02.png" class="orderListImg">
                                        </c:if>
                                    </td>
                                    <!-- 订单号 -->
                                    <td >
                                        <%-- <p data-toggle="tooltip" title="${item.orderNO}" class="show" onclick='window.location.href="${ctx}/order/createOrder/form?id=${item.id}"'>${item.orderNO}</p> --%>
                                        <p data-toggle="tooltip" title="${item.orderNO}" >${item.orderNO}</p>
                                    </td>
                                    <!-- 客户姓名 -->
                                    <td>
                                        <p>${item.customerName}</p>
                                    </td>
                                    <!-- 状态 -->
                                    <td>
                                        <p>${fns:getDictName(item.orderStatusCD)}</p>
                                    </td>
                                    <!-- 款式类别 -->
                                    <td>
                                        <p>${fns:getDictName(item.styleCategoryCD)}
                                        </p>
                                    </td>
                                    <!-- 试穿号码 -->
                                    <td>
                                        <p>${fns:getDictName(item.sizeCD)}</p>
                                    </td>
                                    <!-- 面料名称 -->
                                    <td style="min-width:150px;max-width:150px">
                                        <p>${item.fabricName}</p>
                                    </td>
                                    <!-- 数量 -->
                                    <td style="min-width:48px; max-width:48px">
                                        <p>${item.orderMaterialNumber}</p>
                                    </td>
                                    <!-- 售价 -->
                                    <td>
                                        <p>${item.orderDesignPrice}</p>
                                    </td>
                                    <%-- <!-- 天数 -->
                                    <td style="min-width:50px; max-width:50px">
                                        <p>${item.orderDays}</p>
                                    </td> --%>
                                    <!-- 预计交付日 -->
                                    <td>
                                        <p>
                                            <fmt:formatDate value="${item.targetDate}" pattern="yyyy-MM-dd" />
                                        </p>
                                    </td>
                                    <%-- <!-- 最终交付日 -->
                                    <td>
                                        <p>
                                            <fmt:formatDate value="${item.targetDate}" pattern="yyyy-MM-dd" />
                                        </p>
                                    </td> --%>
                                    <!-- 创建人 -->
                                    <td>
                                        <p>${item.createUserName}</p>
                                    </td>
                                    <!-- 创建日期 -->
                                    <td>
                                        <p>
                                            <fmt:formatDate value="${item.createDate}" pattern="yyyy-MM-dd" />
                                        </p>
                                    </td>
                                </tr>
                            </c:forEach>
                        </tbody>
                    </table>
                    <c:if test="${empty orderList}" >
                        <div class="tableNone" style="line-height:395px;">
                            <img src="${ctxStatic}/images/icon-03.png" height="20"> <spring:message code="There_is_no_data"/>
                        </div>
                    </c:if>
                    </div>
                </div>
            </div>
        </form>
        </div>
    
    <div id="dtBox1"></div>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/DateTimePicker.js"></script>
    <script src="js/layer.js"></script>
    <script src="js/layerStyle.js"></script>

    <script>
    var windowH = window.innerHeight
            ||document.documentElement.clientHeight
            ||document.body.clientHeight
    $('.middle').css('height',windowH - 40);

    $(document).ready(function() {
        $("#dtBox1").DateTimePicker(
                {
                    dateFormat: "yyyy-MM-dd",
                    parentElement: ".timeBox",
                }
        );
        
    });


    $('.tableList tr').on('click',function(){
        if($(this).hasClass('active')){
            $(this).removeClass('active')
            $(this).find("input[type='checkbox']").removeAttr('checked')
        }else{
            $(this).addClass('active');
            $(this).find("input[type='checkbox']").prop('checked','checked')
        }
    })
</script>
</body>
</html>